<template>
	<view class="content">
		<view class="head padding border-title">
			<view class="pos " :style="{ color: show == 1 ? '#EEC581' : '' }" @click="isPos(1)">
				位置
				<image src="../../static/xia.png" v-if="show == 1" class="margin-left-xs" mode=""></image>
				<image src="../../static/xiaa.png" v-else class="margin-left-xs" mode=""></image>
			</view>
			<view class="distance " :style="{ color: show == 2 ? '#EEC581' : '' }" @click="isPos(2)">
				距离
				<image src="../../static/xia.png" v-if="show == 2" class="margin-left-xs" mode=""></image>
				<image src="../../static/xiaa.png" v-else class="margin-left-xs" mode=""></image>
			</view>
		</view>

		<view class="list padding" v-for="(item, index) in 10" :key="index">
			<view class="left"><image src="" mode="" class="bg-gradual-blue r"></image></view>
			<view class="right margin-left">
				<view class="text1">
					<text>养车（航都大道店）</text>
					<text class="sel">上次选择</text>
				</view>
				<text class="text_a margin-top">四川省成都市双流区洪江路二段</text>
				<view class="juli margin-top">
					<text>距当前所在地1.6km</text>
					<!-- <image src="../../static/logo.png" mode="" class="text-right"></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
		};
	},
	methods: {
		isPos(e) {
			console.log('e :>> ', e);
			if (e == 1) {
				this.show = e;
			}
			if (e == 2) {
				this.show = e;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	background-color: #f9f9f9;
	width: 100vw;

	.head {
		position: sticky;
		top: 0;
		display: flex;
		justify-content: space-around;
		border-bottom: 2rpx solid #f5f5f5;
		.pos,
		.distance {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			// #EEC581

			image {
				width: 30rpx;
				height: 16rpx;
			}
		}
	}
	.list {
		display: flex;
		border-bottom: 10rpx solid #f5f5f5;
		.left {
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			.text1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 490rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;

				color: #333333;
				.sel {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 116rpx;
					height: 44rpx;
					background: #eec581;
					border-radius: 22rpx;

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
			}
			.text_a {
				height: 27rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 1;
			}

			.juli {
				display: flex;
				justify-content: space-between;
				width: 100%;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;

				image {
					vertical-align: middle;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
}
</style>
